<template>
  <div class="home" >
    <!-- 轮播图 ================================================================= -->
    <div class="lunbo">
      <el-carousel height="1000px">
        <el-carousel-item>
          <img src="../assets/img/bantou.png" alt="Carousel Image"
            style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/img/bantou1.png" alt="Carousel Image"
            style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/img/bantou2.png" alt="Carousel Image"
            style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/img/bantou3.png" alt="Carousel Image"
            style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 产品信息 ================================================================ -->
    <div class="productionMsg">
       <ui>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
       </ui>
    </div>
    <!-- ------------------------------------------------------------------------------------------------------------ -->
    <div class="perilla">
      <div class="zusu">
        <img src="../assets/img/shuziyi.png" alt="">
        <h5>紫苏简介/ Introduction of perilla</h5>
        <p>
          紫苏为一年生草本植物，原产中国，生长于世界各地，但以严寒地带出产的方为上品。
          紫苏籽中富含ω-3系列多不饱和脂肪酸—α-
          亚麻酸，是人体细胞结构中最重要的成份之一，
          因此又称必需脂肪酸。
        </p>
      </div>
      <div class="pharmacopoeia">
        <img src="../assets/img/shuzier.png" alt="">
        <h5>录入药典/ Into the PHARMACOPOEIA</h5>
        <p>
          2020年7月，经国家药品监督管理局、国家
          卫生健康委员会修正、颁布的2020年版《中
          华人民共和国药典》，详细记载了紫苏子、紫
          苏叶、紫苏梗的性状特征，鉴别方法及相关要
          用方法等内容。
        </p>
      </div>
      <div class="foo">
        <img src="../assets/img/shuzisan.png" alt="">
        <h5>录入药典/ Into the PHARMACOPOEIA</h5>
        <p>
          2020年7月，经国家药品监督管理局、国家
          卫生健康委员会修正、颁布的2020年版《中
          华人民共和国药典》，详细记载了紫苏子、紫
          苏叶、紫苏梗的性状特征，鉴别方法及相关要
          用方法等内容。
        </p>
      </div>
      <div class="oil">
        <img src="../assets/img/shuzisi.png" alt="">
        <h5>录入药典/ Into the PHARMACOPOEIA</h5>
        <p>
          2020年7月，经国家药品监督管理局、国家
          卫生健康委员会修正、颁布的2020年版《中
          华人民共和国药典》，详细记载了紫苏子、紫
          苏叶、紫苏梗的性状特征，鉴别方法及相关要
          用方法等内容。
        </p>
      </div>
    </div>
    <!-- health------------------------------------------------------------------------------------- -->
    <div class="health">
      <h6>健 康 科 普</h6>
      <p class="listEng">HEALTH  SCIENCE</p>
      <div class="science">
          <div class="list">
            <img src="../assets/img/you.jpg" alt="">
            <p class="listMsg">十大植物油营养价值全解析</p>
          </div>
          <div class="list">
            <img src="../assets/img/quan.jpg" alt="">
            <p class="listMsg1">
              中国一年有457万人确诊癌症!劝告:4种食物,再喜欢吃都要管住嘴
            </p>
          </div>
          <div class="list">
            <img src="../assets/img/首页.jpg" alt="">
            <p class="listMsg">十大植物油营养价值全解析</p>
          </div>
      </div>
    </div>
    <!-- News ------------------------------------------------------------------ -->
    <div class="news">
      <h6>新 闻 资 讯</h6>
      <p class="newsEng">NEW INFORMATION</p>
      <div class="science">
          <div class="list">
            <img src="../assets/img/xinwenzixuntupian.png" alt="">
          </div>
          <div class="list">
            <img src="../assets/img/xinwenzixuntupian.png" alt="">
          </div>
          <div class="list">
            <img src="../assets/img/xinwenzixuntupian.png" alt="">
          </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "HelloWorld",
  components: {
  },
  data () {
    return {
      loading: true,
      caseList: [],
      newsList: [],
      swiperOption: {
        notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "vertical", //水平方向移动
        grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        mousewheelControl: true, //同上
        height: window.innerHeight - 60, // 高度设置，占满设备高度
        resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新

        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        //debugger: true,

        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        on: {
          //监听滑动切换事件，返回swiper对象
          // slideChange: () => {
          //   let swiper = this.$refs.mySwiper.swiper;
          //   //console.log(swiper.activeIndex); //滑动打印当前索引
          //   if (swiper.activeIndex === this.list.length - 1) {
          //     //到最后一个加载更多数据
          //     let newList = [];
          //     let listLength = this.list.length;
          //     for (let i = 0; i < 10; i++) {
          //       newList.push(listLength + i);
          //     }
          //     this.list = this.list.concat(newList);
          //   }
          // }
        }
      }
    };
  },
  created () {

  },
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted () {


    // this.caseList = [
    //   {
    //     Id: 42,
    //     Content: '紫苏籽油',
    //     Image: '../../src/assets/img/logo.png',
    //     Title: '黑龙江萃元生物科技',
    //     CreateTime: time.toLocaleTimeString()
    //   }
    // ]
  },
};
</script>

<style lang="scss" scoped>
/* .el-header {
  position: absolute;
} */


//经典案例
.case-item {
  width: 1100px;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  li {
    width: 330px;
    height: 250px;
    list-style: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-origin: content-box;
    margin: 5px;
    position: relative;
    overflow: hidden;

    &:hover {
      .case-item-hover {
        opacity: 1;
        transition: all 0.4s ease-in-out;
      }
    }
  }
}

.order {
  order: -1;
}

.order-img {
  order: 1;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-carousel__indicators button {
  width: 10px;
  /* 设置圆形指示器的宽度 */
  height: 10px;
  /* 设置圆形指示器的高度 */
  border-radius: 50%;
  /* 将方形指示器变成圆形 */
  margin: 0 5px;
  /* 设置圆形指示器之间的间距 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 设置圆形指示器的颜色 */
}

.lunbo {
  margin-bottom: 110px;
}
//未进入此页面的样式
::v-deep .el-carousel__button {
  width: 19px;
  height: 19px;
  background: #cbd9e2;
  border-radius: 50%;
  opacity: 1;
}
//滚动到此页面的样式
::v-deep .is-active .el-carousel__button {
  width: 19px;
  height: 19px;
  background: #0fc6c2;
  border-radius: 50%;
  opacity: 1;
}
.el-carousel__indicator--horizontal {
    display: inline-block;
    padding: 12px 10px !important;
}

.perilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 78px 34px 95px;
  background: url(../assets/img/zisuye2.jpg) center / auto 768px no-repeat;
  height: 1000px;
  .zusu{
    margin-left: 23px;
    p{
      color:#706d6d;
      font-size: 25px;
      margin-right: 310px;
      height: 291px;
      line-height: 2;
    }
  }
  .pharmacopoeia{
    margin-left: 260px;
    p{
      color:#706d6d;
      font-size: 25px;
      margin-right: 236px;
      height: 291px;
      line-height: 2;
    }
  }
  .foo{
    margin-left: 23px;
    p {
      color:#706d6d;
      font-size: 25px;
      margin-right: 337px;
      height: 291px;
      line-height: 2;
    }
  }
  .oil {
    margin-left: 260px;
    p{
      color:#706d6d;
      font-size: 25px;
      margin-right: 236px;
      height: 291px;
      line-height: 2;
    }
  }
  .zusu,
  .pharmacopoeia {
    h5{
      font-size: 40px;
      font-weight: 400;
      color: #6e036d;
    }
    grid-row: 1;
  }
  .foo,
  .oil {
    grid-row: 2;
    h5{
      font-size: 40px;
      font-weight: 400;
      color: #6e036d;
    }
  }
}
.health {
  h6{
    font-size: 76px;
    color:#505453;
    font-weight: normal;
    text-align: center;
    margin-bottom: 24px;
  }
  .listEng {
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    color: #b68d5d;
    margin-bottom: 77px;
  }
}
.science {
  display: flex;
  justify-content: center;
  .list{
    margin-right: 41px;
  }
  .listMsg {
    // height: 100%;
    font-size: 30px !important;
    color:#b68d5d;
  }
  .listMsg1{
    width: 544px;
    // height: 100%;
    font-size: 30px;
    color:#b68d5d;
  }
}
.news {
  margin-top: 36px;
  margin-bottom: 113px;
  h6{
    font-size: 76px;
    color:#505453;
    font-weight: normal;
    text-align: center;
    margin-bottom: 24px;
  }
  .newsEng {
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    color: #2caf84;
    margin-bottom: 77px;
  }
}
.science {
  display: flex;
  justify-content: center;
  .list{
    margin-right: 41px;
  }
  .listMsg {
    height: 100%;
    font-size: 30px;
    color:#b68d5d;
  }
  .listMsg1{
    width: 544px;
    height: 100%;
    font-size: 30px;
    color:#b68d5d;
  }
}
</style>
